
import React from 'react';


// const FancyButton = React.forwardRef((props,ref)=>{
//     return <button ref={ref}>
//         { props.children }
//     </button>
// })

const FancyInput = React.forwardRef((props,refInput)=>{
    console.log('props',props)
    return <input ref={refInput}/>
})


function Refs() {
    //const ref = React.createRef();
    const refInput = React.createRef();
    //console.log('ref',ref)

    const handleClick = () => {
        console.log('refInput',refInput)
        refInput.current.focus();
    }

    return (
        <div>
            <h1>Refs</h1>
            {/* <FancyButton ref={ref}>点击我</FancyButton> */}
            <FancyInput ref={refInput} name='tianxia'/>
            <button onClick={handleClick}>点击</button>
        </div>
    )
}

export default Refs;